<!--
 * @Author: your name
 * @Date: 2021-05-25 11:11:23
 * @LastEditTime: 2021-05-26 18:04:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \遵义\zunyi\src\views\home\home.vue
-->
<template>
  <div class="out-box">
    <!-- 导航条 -->
    <nav-bar></nav-bar>
    <!-- 表单 -->
    <my-table
      :tableData="tableData"
      :propArray="[
        { prop: 'a', lable: '考试时间' },
        { prop: 'b', lable: '主办单位' },
        { prop: 'c', lable: '考试名称' },
      ]"
    >
    <!-- 表单插槽 -->
      <template v-slot="{ data, idx }">
        <button @click="handler(data, idx)">按钮</button>
      </template>
    </my-table>
    <!-- 分页导航 -->
    <pagination></pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          a: "2020-01-31",
          b: "信息网络中心",
          c: "wifi账号申报",
        },
        {
          a: "2020-01-31",
          b: "信息网络中心",
          c: "wifi账号申报",
        },
        {
          a: "2020-01-31",
          b: "信息网络中心",
          c: "wifi账号申报",
        },
        
      ],
    };
  },
  methods: {
    handler(data, idx) {
      console.log(data, idx);
    },
  },
};
</script>

<style lang="scss">
html,
body {
  display: flex;
  justify-content: center;
  height: 100%;
  widows: 100%;
}
.out-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>